<!-- 宿舍成员 -->
<template>
  <div class="DormitoryMembers-container">
    <backgroundBox>
      <el-table
        v-if="props.tableData.length"
        :data="props.tableData"
        style="width: 100%; min-height: 200px"
        v-loadings="props.Loading"
      >
        <el-table-column prop="studentName" label="姓名" />
        <el-table-column prop="studentID" label="学号" />
        <el-table-column prop="studentBed" label="床位" />
        <el-table-column prop="studentPhone" label="电话号" />
        <el-table-column label="入住时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <Icon type="getUpRecord"></Icon>
              <span style="margin-left: 10px">{{ moment(scope.row.studentCheckInTime).format("YYYY-MM-DD")  }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Unavailable v-else></Unavailable>
    </backgroundBox>
  </div>
</template>

<script setup>
import backgroundBox from "@/components/BackgroundBox/index.vue";
import Unavailable from "@/components/Unavailable/index.vue";
import moment from "moment";
import Icon from "@/components/Icon/index.vue"
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  Loading: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="less" scoped>
.DormitoryMembers-container {
  width: 100%;

  .back-container {
    padding: 20px;
    min-height: 200px;
    position: relative;
  }
}
</style>